<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item>预警通知单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" labelWidth="140px" :formData="formData">
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef"
        :actions="table.actions" ref="gjxm" :columns="table.columns" :title="table.title" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" />
    </div>
  </div>
</template>

<script>
import { doNewPageList } from "@/api/EarlyWarningManagement/yjtzd";
import { getAllWarningNotifApi } from "@/api/EarlyWarningManagement/dgdw.js";
import { getDictList } from "@/api/EarlyWarningManagement/yjrw.js";
export default {
  data() {
    return {
      form: {
      },
      // 筛选信息
      formData: [
        {
          elType: "select",
          id: "warningId",
          label: "预警通知单",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "input",
          id: "zxdwName",
          label: "执行单位",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "select",
          id: "zyName",
          dic: "dic_zy",
          label: "专业",
          attrs: {
            value: "",
            clearable: true,
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "dateTimePicker",
          id: "effectStartTimes",
          label: "任务开始时间",
          attrs: {
            value: "",
            size: "small",
            type: "datetime",
            clearable: true,
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        },
        {
          elType: "dateTimePicker",
          id: "effectStartTime",
          label: "任务结束时间",
          attrs: {
            value: "",
            size: "small",
            type: "datetime",
            clearable: true,
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        }
      ],
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "预警通知单反馈列表",
        tableData: [],
        actions: [{}],
        columns: [
          {
            prop: "zxdwName",
            label: "执行单位",
            "min-width": "160px",
            "show-overflow-tooltip": true,
            align: "left"
          },
          {
            prop: "bmbzName",
            label: "部门/班组",
            align: "left"
          },
          {
            prop: "zyName",
            label: "专业",
            align: "center"
          },
          {
            prop: "department",
            label: "任务开始时间",
            align: "left"
          },
          {
            prop: "vehicleProperties",
            label: "任务结束时间",
            align: "left"
          },
          {
            prop: "rwdd",
            label: "任务地点",
            "min-width": "160px",
            "show-overflow-tooltip": true,
            align: "left"
          },
          {
            prop: "rwfzr",
            label: "任务负责人",
            align: "left"
          },
          {
            prop: "vehicleNum",
            label: "关联预警通知单",
            align: "left",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='width: 100%;' class='commonTableStyle'
                      {...{
                        on: {
                          click: () => {
                            this.detailList(row);
                          }
                        }
                      }}
                    >
                      {row.warningNoticeName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "80px",
            render: (h, scope) => {
              const arr = ["查看", "人员轨迹"];
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 2px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "380px",
          // height: "380px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
        // "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      pageNum: 1,
      pageSize: 10
    };
  },
  mounted() {
    this.list();
    this.getInputVal();
  },
  computed: {
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        dept: (org && JSON.parse(org).orgName) || "",
        creatorDeptId: (org && JSON.parse(org).orgId) || "",
        unitName: (org && JSON.parse(org).orgName) || "",
        departmentName: (org && JSON.parse(org).departmentName) || ""
      };
      return creator;
    }
  },
  methods: {
    // 获取下拉框数据
    getInputVal() {
      this.formData.forEach((item) => {
        if (item.dic) {
          getDictList({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: item.dicName
              };
            });
            item.options = option;
          });
        }
      });
      getAllWarningNotifApi({ createDeptId: this.getCreator.creatorDeptId, noticeState: 3 }).then(res => {
        let options = [];
        options = res.data.map(item => {
          return {
            label: item.warningNoticeName,
            value: item.id,
            ...item
          };
        });
        this.formData[0].options = options;
      });
    },
    // 列表
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      const res = await doNewPageList(parmas);
      this.$set(this.table, "tableData", res.data);
      this.paginationAtrrs.total = res.total;
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.pageNum = 1;
      this.$refs.gjxm.paginationAtrrsInner["current-page"] = 1;
      this.list();
    },
    // 查询
    async query() {
      this.$refs.gjxm.paginationAtrrsInner["current-page"] = 1;
      this.pageNum = 1;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        warningId: this.form.warningId,
        zxdwName: this.form.zxdwName,
        zyName: this.form.zyName
      };
      const res = await doNewPageList(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.query();
    },
    // 管理预警通知单详情
    detailList(id) {
      this.$router.push({
        name: "NoticeDetail",
        query: { id: id.id }
      });
    },
    // 列表表格按钮事件
    actionHandle(item, scope) {
      if (item === "查看") {
        this.NoticeDetail(scope.row);
      } else if (item === "人员反馈") {
        // this.detailForm(scope.row);
      }
    },
    // 查看
    NoticeDetail(id) {
      this.$router.push({
        name: "notificationFeedbackDetail",
        query: { id: id.id }
      });
    }
  }
};

</script>

<style lang='less' scoped>
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

.upload {
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 10px;

  :deep(.el-input__inner) {
    width: 98%;
    color: rgb(10, 99, 241);
    text-decoration: underline;
  }

  :deep(.el-button) {
    padding: 9px 15px !important;
  }
}

:deep(.el-upload__tip) {
  font-size: 15px;
  color: red;
  margin: 10px 0;
  margin-left: 19px;
}

:deep(.el-dialog__body) {
  position: relative;
}

.updr {
  font-weight: 700;
  font-style: normal;
  color: #555555;
  font-size: 20px;
  text-indent: 19px;
  margin: 10px 0;
}

:deep(.el-upload-list__item-name) {
  margin-left: 16px;
}

.updrs {
  font-style: normal;
  color: #1723c4;
  font-size: 15px;
  text-indent: 19px;
  width: 110px;
  position: absolute;
  text-decoration: underline;
  cursor: pointer;
  top: 112px;
  left: 300px;
}

.promptText {
  margin-left: 19px;
  font-size: 15px;
  color: red;
  // text-indent: 19px;
}

:deep(.el-upload) {
  width: 100% !important;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-descriptions-item__label:not(.is-bordered-label)) {
  margin-right: 5px;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-form-item__label) {
  font-size: 16px;
}

.doc-box {
  border: 1px solid #d9d9d9;
  padding: 20px 0 10px 0;
  // max-height: 570px;
  // overflow-y: auto;

  .doc-item {
    position: relative;
    padding: 10px 5px 0 5px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid #d7d7d7;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30%;
      z-index: 1;
    }

    .checkbox {
      position: absolute;
      right: 10px;
      top: 5px;
      zoom: 200%;
    }

    :deep(.el-descriptions :not(.is-bordered) .el-descriptions-item__cell) {
      padding-bottom: 4px;
    }

    :deep(.el-descriptions__body) {
      background-color: transparent;
    }

    .doc-img {
      width: 80px;
      height: 80px;
      vertical-align: middle;
      margin-bottom: 5px;
    }

    :deep(.doc-label) {
      width: 60px;
      justify-content: flex-end;
    }

    :deep(.el-checkbox__inner::after) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__inner) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #fff;
    }
  }

  .active-doc {
    background-color: #fff;
    border-color: #3270ff;

    // :deep(.el-descriptions__body) {
    //   color: #3270ff;
    // }
  }
}

.fm-box {
  display: flex;

  .fm-img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }

  .fm-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 160px;
    color: #606266;

    .upload-btn {
      position: relative;
      width: 114px;
      cursor: pointer;

      &:hover {
        :deep(.el-button) {
          border-color: #409eff;
        }
      }

      #fm-btn {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        width: 114px;
        height: 36px;
        z-index: 1;
      }

      :deep(.el-button) {
        padding: 9px 40px;
        font-size: 16px;

        span {
          text-decoration: underline;
          color: #3270ff;
        }
      }
    }
  }
}

/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  font-size: 26px;
  position: relative;
  top: 8px;
}

/deep/.el-button--small {
  font-size: 16px;
}

/deep/.el-button--mini {
  font-size: 16px;
}

/deep/.fileLevel .el-select-dropdown__item {
  padding-left: 20px;
}
</style>

